<template>
  <div class="app-container">
    <el-container>
      <el-aside class="account-header" width="170px">
        <div>
          <img :src="IMGURL + merchantInfo.imgKey" alt="" class="img-header" v-if="merchantInfo.imgKey">
        </div>
        <h1>{{merchantInfo.contacter}}</h1>
        <div>
          <router-link :to="{name: 'basicInformation'}">
            <el-button size="mini">账户信息</el-button>
          </router-link>
        </div>
      </el-aside>
      <el-main class="account-main">
        <h1>可提现余额</h1>
        <h2>￥{{merchantInfo.balance}}</h2>
        <el-button size="mini" @click="dialogVisible1 = true">提现</el-button>
      </el-main>
    </el-container>
    <el-tabs v-model="activeName">
      <el-tab-pane label="余额流水记录" name="first"></el-tab-pane>
    </el-tabs>
    <el-table
      element-loading-text="Loading"
      highlight-current-row
      row-class-name="ele-table-row"
      :data="tableData"
      v-loading="loading"
      style="width: 100%">
      <el-table-column label="序号" width="60">
        <template slot-scope="scope">
          {{scope.$index + 1 + 10 * (page.number - 1)}}
        </template>
      </el-table-column>
      <el-table-column label="日期" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.saveTime}}
        </template>
      </el-table-column>
      <el-table-column label="类型" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <!--{{scope.row.type}}-->
          <span v-if="scope.row.type === 1">账单结算</span>
          <span v-if="scope.row.type === 2">提现</span>
        </template>
      </el-table-column>
      <el-table-column label="金额" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.amount}}
        </template>
      </el-table-column>
      <el-table-column label="现有余额" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.balance}}
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <!--{{scope.row.status}}-->
          <span v-if="scope.row.status === 1">新建申请</span>
          <span v-if="scope.row.status === 2">申请通过</span>
          <span v-if="scope.row.status === 3">申请不通过</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <!--<el-button size="mini">查看</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!---->
    <el-dialog
      class="money-dialog"
      title="结算信息"
      :visible.sync="dialogVisible1"
      width="500px">
      <li>提现金额 <el-input size="small" style="width: 200px;" v-model="amount"></el-input></li>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false" size="small">取 消</el-button>
    <el-button type="primary" @click="withdrawal" size="small">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { money_page, merchant_info, money_status } from '@/api'
  import { page } from '@/mixins/page'
  import { IMGURL } from '@/utils/imgurl'

  export default {
    mixins: [page],
    data() {
      return {
        IMGURL: IMGURL,
        amount: 0,
        dialogVisible1: false,
        tableData: [{}, {}],
        activeName: 'first',
        loading: true,
        merchantInfo: {}
      }
    },
    methods: {
      getInfo() {
        money_page(this.page).then(res => {
          console.log(res)
          this.tableData = res.content
          this.page.total = res.totalElements
          this.loading = false
        })
      },
      withdrawal() {
        const params = {
          amount: this.amount
        }
        money_status(params).then(res => {
          console.log(res)
          this.$message({ type: 'success', message: '提现申请成功' })
          this.dialogVisible1 = false
        })
      }
    },
    mounted() {
      this.getInfo()
      merchant_info().then(res => {
        console.log(res, 1)
        this.merchantInfo = res.brand
      })
    }
  }
</script>

<style lang="scss">
  .account-header {
    height: 170px;
    background-color: #f1f1f1;
    h1 {
      text-align: center;
      margin-top: 10px;
      font-size: 13px;
      font-weight: 400;
    }
    div {
      width: 80px;
      margin: 0 auto;
      margin-top: 15px;
    }
  }
  .account-main {
    h1 {
      margin-top: 10px;
      font-weight: 400;
      font-size: 13px;
      margin-bottom: 10px;
    }
    .el-button {
      margin-top: 40px;
    }
  }

  li {
    list-style: none;
  }
  .img-header {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 auto;
    overflow: hidden;
  }
</style>
